<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="ui.xhtml">

	<ui:define name="head">
		<style type="text/css">
.ui-confirm-dialog-severity {
	margin: 0 7px 7px 0;
}
</style>
	</ui:define>
	<ui:define name="content">
		<p:panel header="#{msg.link_properties}" id="panel">
			<h:form>
				<p:commandButton value="#{msg.label_newpropertie}" onclick="dlgNew.show()"
					icon="add" />
			</h:form>
			<!-- Formulario nueva propiedad -->
			<h:form id="frmNew">
				<p:dialog header="#{msg.label_newpropertie}" widgetVar="dlgNew"
					resizable="false" modal="true" id="newDialog">
					<p:growl id="newGrowl" showDetail="false" sticky="true" />
					<h:panelGrid columns="2" style="margin-bottom:10px; width: 400px;"
						cellpadding="" id="matchGrid">
						<h:outputLabel for="label" value="#{msg.label_proplabel}: " />
						<p:inputText id="label" required="true" size="30"
							value="#{PropertiesUserBean.label}" />
						<h:outputLabel for="type" value="#{msg.label_fieldtype}: " />
						<p:autoComplete value="#{PropertiesUserBean.typeField}"
							id="basicPojo"
							completeMethod="#{PropertiesUserBean.completeType}" var="p"
							itemLabel="#{p.description}" itemValue="#{p}"
							converter="PropertiesUserConverter" forceSelection="true" />
						<h:outputLabel for="size" value="#{msg.label_size}: " />
						<p:inputText id="size" size="5" value="#{PropertiesUserBean.size}" />
						<h:outputText value="#{msg.label_required}: " />
						<p:selectBooleanCheckbox value="#{PropertiesUserBean.mandatory}" />
						<h:outputText value="#{msg.label_activated}: " />
						<p:selectBooleanCheckbox value="#{PropertiesUserBean.active}" />
						<f:facet name="footer">
							<p:commandButton id="submitButton" value="#{msg.label_save}" icon="save"
								oncomplete="dlgNew.hide();"
								actionListener="#{PropertiesUserBean.save}"
								update=":frmlist,newGrowl,newDialog" />
							<p:commandButton value="#{msg.label_cancel}" oncomplete="dlgNew.hide();"
								icon="cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:form>
			<br />
			<!-- Formulario lista de propiedades para usuarios -->
			<h:form id="frmlist">
				<p:growl id="listGlow" showDetail="true" />
				<p:dataTable var="properties"
					value="#{PropertiesUserBean.listProperties}" paginator="true"
					rows="10" paginatorPosition="bottom"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="1,5,10,15,20,30">
					<h:inputHidden value="#{properties.id}" />
					<p:column headerText="#{msg.label_proplabel}">
						<h:outputText value="#{properties.label}" />
					</p:column>
					<p:column headerText="#{msg.label_fieldtype}">
						<h:outputText value="#{properties.typeField.description}" />
					</p:column>
					<p:column headerText="#{msg.label_size}" style="width:100px">
						<h:outputText value="#{properties.size}" />
					</p:column>
					<p:column headerText="#{msg.label_required}"
						style="width:12%; text-align: center;">
						<p:selectBooleanCheckbox value="#{properties.mandatory}"
							disabled="true" />
					</p:column>
					<p:column headerText="Status"
						style="width:12%; text-align: center;">
						<p:selectBooleanCheckbox value="#{properties.status.valor}"
							disabled="true" />
					</p:column>
					<p:column style="width:12%; text-align: center;">
						<p:commandButton oncomplete="editDialog.show()" icon="edit"
							title="#{msg.label_edit}" update=":frmEdit"
							actionListener="#{PropertiesUserBean.prepareProperties(properties.id)}" />
					</p:column>
				</p:dataTable>
			</h:form>
			<!-- Formulario para editar -->
			<h:form id="frmEdit">
				<p:dialog header="#{msg.label_editprop}" widgetVar="editDialog"
					resizable="false" modal="true" id="editDialog">
					<p:growl id="editGrowl" showDetail="false" sticky="true" />
					<h:panelGrid columns="2" style="margin-bottom:10px; width: 400px;">
						<h:outputLabel for="label" value="#{msg.label_proplabel}: " />
						<p:inputText id="label" required="true" size="30"
							value="#{PropertiesUserBean.propertiesUser.label}" />
						<h:outputLabel for="type" value="#{msg.label_fieldtype}: " />
						<p:autoComplete value="#{PropertiesUserBean.typeField}"
							id="basicPojo"
							completeMethod="#{PropertiesUserBean.completeType}" var="p"
							itemLabel="#{p.description}" itemValue="#{p}"
							converter="PropertiesUserConverter" forceSelection="true" />
						<h:outputLabel for="size" value="#{msg.label_size}: " />
						<p:inputText id="size" size="5"
							value="#{PropertiesUserBean.propertiesUser.size}" />
						<h:outputText value="#{msg.label_required}: " />
						<p:selectBooleanCheckbox
							value="#{PropertiesUserBean.propertiesUser.mandatory}" />
						<h:outputText value="#{msg.label_activated}: " />
						<p:selectBooleanCheckbox value="#{PropertiesUserBean.active}" />
						<f:facet name="footer">
							<p:commandButton value="#{msg.label_save}" icon="save"
								actionListener="#{PropertiesUserBean.edit()}"
								update=":frmlist,editDialog" oncomplete="editDialog.hide();" />
							<p:commandButton value="#{msg.label_cancel}" oncomplete="editDialog.hide();"
								icon="cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:form>
		</p:panel>
		<p:confirmDialog header="Oooops!!!" severity="alert"
			visible="#{not empty param['expired']}" message="View has expired."
			widgetVar="confirmDlg">
			<p:commandButton type="button" value="OK" onclick="confirmDlg.hide()" />
		</p:confirmDialog>
	</ui:define>
</ui:composition>